import Vue from "vue"
import VueRouter from "vue-router"
Vue.use(VueRouter)
import store from "@/store"
// 优化使用编程式导航多次相同操作路由跳转并传参时，控制台报错的问题。
// 优化方案：重写push or replace
// 1.备份原本的push和replace
let originPush = VueRouter.prototype.push;
let originReplace = VueRouter.prototype.replace;

// 2.重构push or replace
// 第一个参数：告诉原来push方法，你往哪里跳转（路径）
// 第二个参数：成功的回调
// 第三个参数：失败的回调
VueRouter.prototype.push = function (location, resolve, reject) {
    if (resolve && reject) {
        // 使用js的call方法改变this指向
        // 小知识：call和apply的区别：
        //        相同点：都可以调用一次函数，都可以更改函数的this指向一次（即上下文）
        //        不同点：传参不同，call传递参数用逗号隔开；apply则是传递数组。
        originPush.call(this, location, resolve, reject)
    } else {
        originPush.call(this, location, () => { }, () => { })
    }
}
VueRouter.prototype.replace = function (location, resolve, reject) {
    if (resolve && reject) {
        originReplace.call(this, location, resolve, reject)
    } else {
        originReplace.call(this, location, () => { }, () => { })
    }
}

// 引入路由配置
import routes from "./routes"

let router = new VueRouter({
    routes,
    scrollBehavior(to, from, savedPosition) {
        // 始终滚动到顶部
        return { y: 0 }
    },
})

// 全局守卫
router.beforeEach(async (to, from, next) => {
    // next()
    let token = store.state.user.token
    let name = store.state.user.userInfo.name
    // 如果用户登录了
    if (token) {
        // 如果用户已经登录了但还想去登录页 ---- 不行
        if (to.path == '/login') {
            next("/")
        } else {
            next()
            // 如果用户已经登录了，想访问其他页面（非登录页），且项目为实现某些需求需要获取到用户信息。
            // 如果已经获取到了用户信息
            if (name) {
                next()
            } else {
                // 如果没有获取到用户信息
                // 路由跳转之前，先获取用户信息再放行
                try {
                    await store.dispatch("getUserInfo");
                    next()
                } catch (error) {
                    // token失效时
                    await store.dispatch("userLogOut")
                    next("/login")
                }
            }
        }
    } else {
        // 未登录不能去的几个路由：交易相关（trade）、支付相关（pay、paysuccess）、个人中心相关（center）
        // 如果要去-- > 跳转到登录路由
        // 如果去的不是上述路由-- > 放行
        console.log(to.path);
        // to.path 要去的路由的路由地址
        let toPath = to.path

        // 判断不能去的路由、和能去的路由
        // 不能去的路由(用indexOf来判断目标路由是否为“不能去的路由”效率会高一点，可以比toPath == '/trade'... 少写几个条件)
        if (toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center') != -1 || toPath.indexOf('/shopCart') != -1) {
            // 跳登录(在路由中加入query参数，query参数存的是“要去的路由”的路由地址，这样就可以在登录后跳转到未登录时“想去的路由”的路由地址了。)
            // 需要在login中的登录按钮中条件判断一下
            next(`/login?redirect=${toPath}`)
        } else {
            // 能去的路由
            next()
        }
    }
})

export default router